<template>
    <div class="app-center">
        <header-bar>
            <a-menu v-model="currentMenu" mode="horizontal" class="top-menu">
                <a-menu-item key="manager" @click="$router.push({name:'setting-manager'})">
                    员工管理
                </a-menu-item>
                <a-menu-item key="roles" @click="$router.push({name:'setting-roles'})">
                    角色管理
                </a-menu-item>

            </a-menu>
        </header-bar>
        <div class="app-inner clearfix">
            <table-toolbar>
                <div>
                    <a-button type="primary" size="large">添加员工</a-button>
                </div>
                <div class="search" slot="search">

                    <a-select allowClear clearable :defaultValue="role" style="width:180px" placeholder="角色"
                              @change="changeRoles" transfer>
                        <a-select-option v-for="item in roles" :value="item.name" :key="item.name">{{ item.description
                            }}
                        </a-select-option>
                    </a-select>
                    <a-input placeholder="搜索" style="width: auto;margin-left: 16px;">
                        <a-icon type="search" slot="prefix"></a-icon>
                    </a-input>
                </div>
            </table-toolbar>
            <a-table :rowKey="record => record.username" :dataSource="table.data" :columns="table.columns"
                     :locale="table.locale" :pagination="table.pagination" :loading="table.loading">
                <template slot="roles" slot-scope="roles">
                    <a-tag color="blue" v-for="item in roles" :key="item.name">{{item.description}}</a-tag>
                </template>
                <template slot="created_at" slot-scope="created_at">
                    {{created_at * 1000|format('YYYY/MM/DD HH:mm')}}
                </template>
                <template slot="action" slot-scope="id, username">

                </template>

            </a-table>

            <!--<Table :data="table.data" :loading="table.loading" :border="false" :columns="table.columns"-->
            <!--:no-data-text="table.noDataText"></Table>-->
            <!--<div class="app-pagination">-->
            <!--<Page :current="table.pagination.current" :total="table.pagination.total" show-sizer/>-->
            <!--</div>-->
        </div>
    </div>
</template>

<script lang="jsx">
    import HeaderBar from "../../../components/HeaderBar";
    import TableToolbar from "../../../components/table-toolbar";
    import {loadRoles, loadManager} from '@/api/setting/manager'

    import {Tag} from 'iview'

    export default {
        name: "manager",
        components: {TableToolbar, HeaderBar},
        data() {
            return {
                role: null,
                currentMenu: ['manager'],
                table: {
                    loading: false,
                    columns: [
                        {
                            title: "账号",
                            dataIndex: 'username',
                        },
                        {
                            title: "姓名",
                            dataIndex: "nickname"
                        },
                        {
                            title: "所属门店",
                            dataIndex: "shop"
                        },
                        {
                            title: "联系手机",
                            dataIndex: "phone"
                        },
                        {
                            title: "添加人",
                            dataIndex: "add_user"
                        },
                        {
                            title: '角色',
                            dataIndex: "roles",
                            scopedSlots: {customRender: 'roles'},
                        },
                        {
                            title: '添加时间',
                            dataIndex: "created_at",
                            scopedSlots: {customRender: 'created_at'},

                        },
                        {
                            title: '操作',
                            key: 'action',
                            scopedSlots: {customRender: 'action'},

                        }
                    ],
                    data: [],
                    locale: {
                        emptyText: "~没有更多数据了~"
                    },
                    noDataText: '~没有更多数据了~',
                    pagination: {
                        total: 0,
                        current: 1,
                        pageSize: 10,
                    }
                },
                roles: []
            }
        },
        mounted() {
            this.loadRoleAll();
            this.loadData();
        },

        methods: {
            loadRoleAll() {
                loadRoles().then(data => {
                    console.log(data)
                    this.roles = data.list
                }).catch(error => {

                })
            },
            changeRoles(value) {
                this.role = value
                this.loadData()
            },
            loadData() {
                this.table.loading = true
                let params = {
                    page: this.table.pagination.current,
                    pageSize: this.table.pagination.pageSize,
                }
                if (this.role) {
                    params.role = this.role
                }
                loadManager(params).then(data => {
                    this.table.loading = false
                    this.table.data = data.list
                    this.table.pagination.current = data.page.currentPage
                    this.table.pagination.total = data.page.totalCount

                }).catch(error => {
                    this.table.loading = false

                })
            }
        }
    }
</script>

<style scoped lang="less">
    .top-menu {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #e5e5e5;
    }

    .clearfix {
        zoom: 1;
    }

    .app-center {
        .app-inner {
            margin: 10px;
            padding: 15px;
            min-width: 750px;
            min-height: 500px;
            box-shadow: 0 0 1px 0 rgba(0, 0, 0, .2);
            background-color: #fff;
            .app-pagination {
                margin-top: 16px;
                margin-left: auto;
                text-align: right;
            }
        }
    }


</style>
